<template>
    <div class="cont" ref="fullscreenContainer">
        <div class="title-cont">
            <div class="date-cont">
                <p>2023年10月17日</p>
                <p>星期二</p>
                <p>15:26</p>
            </div>
            <div class="title-text">
                <h2>数字化生态服务运营系统</h2>
            </div>
            <ul class="tab-list">
                <li class="active">工作平台</li>
                <li>服务平台</li>
                <li>经营平台</li>
                <li @click="handleJump">返回</li>
            </ul>
        </div>

        <!-- 三栏布局 -->
        <div class="flex-cont">
            <div class="table-left">
                <div class="sz-cont">
                </div>
                <div class="img-cont">
                    <img src="../../assets/images/sth.png" alt="">
                    <div class="guang-cont"></div>
                    <div class="guang-cont1 guang-cont"></div>
                    <div class="guang-cont2 guang-cont"></div>
                    <div class="guang-cont3 guang-cont"></div>
                    <div class="guang-cont4 guang-cont"></div>
                    <div class="guang-cont5 guang-cont"></div>
                    <div class="guang-cont6 guang-cont"></div>
                    <div class="guang-cont7 guang-cont"></div>
                    <div class="guang-cont8 guang-cont"></div>
                    <div class="guang-cont9 guang-cont"></div>
                    <div class="guang-cont10 guang-cont"></div>
                    <div class="guang-cont11 guang-cont"></div>
                    <div class="guang-cont12 guang-cont"></div>
                    <div class="guang-cont13 guang-cont"></div>
                    <div class="guang-cont14 guang-cont"></div>
                    <div class="guang-cont15 guang-cont"></div>
                    <div class="guang-cont16 guang-cont"></div>
                    <div class="guang-cont17 guang-cont"></div>
                    <div class="guang-cont18 guang-cont"></div>
                    <div class="guang-cont19 guang-cont"></div>
                    <div class="guang-cont20 guang-cont"></div>
                    <div class="guang-cont21 guang-cont"></div>
                    <div class="guang-cont22 guang-cont"></div>
                    <div class="guang-cont23 guang-cont"></div>
                    <div class="guang-cont24 guang-cont"></div>
                    <div class="guang-cont25 guang-cont"></div>
                </div>
                <div class="tree-cont"></div>
                <div class="star"></div>
                <div class="star star1"></div>
                <div class="star star2"></div>
                <div class="star star3"></div>
                <div class="star star4"></div>
                <div class="quan-cont">
                    <MyCircle />
                </div>
            </div>
            <div class="map-cont">
                <div class="map-title">
                    <myTotal v-for="item in totalInfo" :info="item" />
                </div>
                <myMap @curData="handledata($event)" />
            </div>
            <div class="table-right">
                <MyTitle text="宝兴县基层联合社" />
                <div class="table-list">
                    <MyTable :tab="{ title: '引农入社', info: [{ num: '105422', dw: '个', text: '数量' }] }" />
                    <MyTable :tab="list1" />
                    <MyTable :tab="list2" />
                    <MyTable :tab="list3" />
                </div>
                <MyTitle text="宝兴县基层联合社产业情况" />
                <div class="condition">
                    <myCondition></myCondition>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import MyTitle from '@/components/my-title.vue';
import MyCircle from './components/my-circle.vue';
import MyTable from './components/my-table.vue';
import myCondition from './components/my-condition.vue';
import myTotal from './components/my-total.vue';
import myMap from '../home/components/my-map.vue';
import icon1 from '../../assets/images/icon4.png'
import icon2 from '../../assets/images/icon5.png'
import icon3 from '../../assets/images/icon6.png'
import icon4 from '../../assets/images/icon7.png'
import '@/assets/css/guang.css'
export default {

    data() {
        return {
            list1: {
                title: '教农学技', info: [
                    { num: '105422', dw: '个', text: '专家数量' },
                    { num: '105422', dw: '个', text: '教学视频数量' },
                    { num: '105422', dw: '个', text: '服务社员数量' },
                ]
            },
            list2: {
                title: '带农入市', info: [
                    { num: '105422', dw: '个', text: '店铺数量' },
                    { num: '105422', dw: '个', text: '销售数量' },
                    { num: '105422', dw: '万元', text: '销售额' },
                ]
            },
            list3: {
                title: '助农增收', info: [
                    { num: '105422', dw: '个', text: '数量' },
                ]
            },
            totalInfo: [
                {
                    icon: icon1,
                    total: '8210',
                    dw: '个',
                    text: '生产合作社'
                },
                {
                    icon: icon2,
                    total: '32500',
                    dw: '个',
                    text: '服务合作社'
                },
                {
                    icon: icon3,
                    total: '32100',
                    dw: '个',
                    text: '消费合作社'
                },
                {
                    icon: icon4,
                    total: '32100',
                    dw: '个',
                    text: '信用合作社'
                },
            ]

        }
    },
    methods: {
        handleJump() {
            this.$router.go(-1)
        },
        handledata(msg) {
            console.log(msg);

        }
    },
    components: {
        MyTitle,
        MyCircle,
        MyTable,
        myCondition,
        myTotal,
        myMap
    },
    mounted() {

    }
}
</script>

<style lang="scss" scoped>
.star {
    position: absolute;
    width: 2px;
    height: 40px;
    background: white;
    border-radius: 4px;
    top: 63%;
    opacity: 0.5;
    left: 1.8594rem;
    animation: star-fall 2s linear infinite;
}

.star1 {
    left: 1.4594rem;
    animation: star-fall 3s linear infinite;

}

.star2 {
    left: 1.0594rem;
    animation: star-fall 2s linear infinite;

}

.star3 {
    left: 2.0594rem;
    animation: star-fall 2s linear infinite;

}

.star4 {
    left: 2.5594rem;
    animation: star-fall 3s linear infinite;

}

@keyframes star-fall {
    0% {
        transform: translateY(200px);
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: translateY(-20px);
        opacity: 0;
    }
}


.cont {
    background: url('../../assets/images/bg.png') no-repeat 0 0/100% 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;

    .title-cont {
        box-sizing: border-box;
        height: 6%;
        width: 100%;
        background: url('../../assets/images/title.png') no-repeat 0 0/100% 100%;
        display: flex;
        justify-content: space-between;

        >.date-cont {
            display: flex;
            width: 15%;
            height: 50%;
            color: #7ca3c8;
            font-size: .0625rem;
            justify-content: space-evenly;
            align-items: center;
            align-self: flex-end;
            background: url('../../assets/images/date.png') no-repeat 0 0/100% 100%;
        }

        >.title-text {
            width: 55%;
            height: 100%;
            color: #fafafb;
            font-size: .1146rem;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding-left: .2604rem;
            box-sizing: border-box;
        }

        >.tab-list {
            width: 20%;
            display: flex;
            justify-content: end;
            padding-right: .0625rem;
            align-self: flex-end;

            >li {
                color: #7ca3c8;
                width: 33.33%;
                height: .1771rem;
                background: url('../../assets/images/tab.png') no-repeat 0 0/100% 100%;
                text-align: center;
                line-height: .1771rem;
                cursor: pointer;
            }
        }
    }

    .flex-cont {
        display: flex;
        justify-content: space-between;
        flex: 1;

        >div {
            width: 33.33%;
            box-sizing: border-box;
        }

        >.map-cont {
            position: relative;
            padding-top: .5208rem;

            >.map-title {
                position: absolute;
                height: 6%;
                width: 100%;
                top: .0621rem;
                left: -.0117rem;
                display: flex;
                justify-content: space-between;
            }
        }

        >.table-left {
            margin-top: .4313rem;
            position: relative;

            >.sz-cont {
                position: absolute;
                top: 68%;
                left: 37%;
                width: 35%;
                height: 20%;
                background: url('../../assets/images/pt4.png') no-repeat 0 0/100% 100%;
                z-index: 2222;
            }

            >.img-cont {
                width: 100%;
                height: 65%;
                padding-left: .2083rem;
                position: relative;

                >img {
                    width: 90%;
                    height: 100%;
                }


            }

            >.tree-cont {
                height: 15%;
                /* background-color: red; */
            }

            >.quan-cont {
                position: absolute;
                bottom: 0;
                left: .2785rem;
                padding-left: .2083rem;
                width: 50%;
                height: 30%;
            }
        }

        >.table-right {
            padding: .0521rem .304rem 0 1.2042rem;

            >.table-list {
                height: 30%;
                margin-bottom: .1042rem;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
            }

            >.condition {
                height: 55%;
                width: 100%;
            }
        }
    }
}
</style>